import React, { Suspense } from 'react'
import { Row, Col, Space, Card, Statistic } from 'antd'
import { DashboardSkeleton } from '../../components/dashboard/DashboardSkeleton'
import { UserInfoCard } from '../../components/dashboard/UserInfoCard'
import { QuickActionCards } from '../../components/dashboard/QuickActionCards'
import { AnnouncementBanner } from '../../components/dashboard/AnnouncementBanner'
import { useBreakpoint } from '@/hooks/useBreakpoint'
import BottomNavigation from '@/components/navigation/BottomNavigation'
import './style.css'

const Dashboard: React.FC = () => {
  const breakpoint = useBreakpoint()
  const isMobile = breakpoint === 'mobile'

  // 模拟统计数据
  const stats = [
    { title: '今日创作', value: 12 },
    { title: '本周热点', value: 35 },
    { title: '文章总数', value: 248 },
    { title: '字数统计', value: 125000 }
  ]

  return (
    <div className={`dashboard-container ${isMobile ? 'mobile' : 'desktop'}`}>
      <Suspense fallback={<DashboardSkeleton />}>
        <Space direction="vertical" size="large" className="w-full">
          {/* 快捷操作 - 放在最上面 */}
          {isMobile ? (
            <div className="quick-actions-mobile">
              <h3 className="text-lg font-semibold mb-3">快捷操作</h3>
              <div className="quick-actions-scroll">
                <QuickActionCards />
              </div>
            </div>
          ) : (
            <QuickActionCards />
          )}

          <AnnouncementBanner />

          {/* 统计卡片 */}
          <div className="stats-section">
            <Row gutter={[16, 16]}>
              {stats.map((stat, index) => (
                <Col xs={12} sm={12} md={6} key={index}>
                  <Card>
                    <Statistic
                      title={stat.title}
                      value={stat.value}
                      valueStyle={{
                        fontSize: isMobile ? '24px' : '32px',
                        fontWeight: 'bold'
                      }}
                    />
                  </Card>
                </Col>
              ))}
            </Row>
          </div>

          {/* 用户信息卡片 */}
          {!isMobile && <UserInfoCard />}
          {isMobile && (
            <div className="user-info-mobile">
              <UserInfoCard />
            </div>
          )}
        </Space>
      </Suspense>

      {/* 移动端底部导航 */}
      {isMobile && <BottomNavigation activeKey="dashboard" />}
    </div>
  )
}

export default Dashboard
